<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css"
export default {
  name: "position",
  props:['position'],
  data() {
    return {};
  },
  mounted() {
    this.initMap()
  },
  created() {
    // this.initMap()
  },
  methods: {
    // 初始化地图
//     initMap() {
//         let that=this
//       var map = new AMap.Map("container", {
//         zoom: that.position._scale, //级别
//         center: [that.position._y, that.position._x], //中心点坐标
//         //  mapStyle: 'amap://styles/macaron', 
//       });
//       var marker = new AMap.Marker({
//         position: new AMap.LngLat(that.position._y, that.position._x),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
//       });
// map.add(marker);
//     },

initMap() {
      let that=this

      let map = L.map("container", {
                      minZoom: 3,
                      maxZoom: 15,
                      center: [ that.position._x,that.position._y],
                      zoom: 15,
                      zoomDelta: 0.5,
                      fullscreenControl: false,
                      zoomControl: false,
                      attributionControl: false
                    });
            this.map = map;
            //http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}//arcgis在线地图
            this.baseLayer=L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{
                    attribution: '&copy; 高德地图',
                    maxZoom: 15,
                    minZoom: 3,
                    subdomains: "1234"
                });
            this.map.addLayer(this.baseLayer);
            this.addMarker()
    },
    addMarker() {
      let that=this

      //设置图标样式
      var myIcon = L.icon({
        iconUrl: require('../../../assets/po.png'),
        iconSize: [30, 30],
      });
      that.marker = L.marker([that.position._x,that.position._y], {
        icon: myIcon
      }).addTo(this.map)
      // that.marker.bindPopup(that.position.title);
    },
  },
};
</script>

<style scoped>
#container{
   width: 233px;
   height: 180px;
   
}
@media screen and (min-width: 2360px) {
#container{
   width: 1rem;
   height: 0.8rem;
}
}
</style>